<template>
  <div id="order">
    <h1 class="titleTag">订单管理</h1>
    <div class="navToggle">
      <button :class="navShow==1?'active':''" @click="offerYes">已报价</button><button :class="navShow==2?'active':''"
        @click="offerNo">未报价</button>
    </div>
    <el-form :inline="true" :model="ruleForm" ref="ruleForm" class="mt24">
      <el-form-item>
        <el-input v-model="ruleForm.number" placeholder="货源单号" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 144px;" v-model="ruleForm.value" placeholder="发货类型" size="small">
          <el-option width="100" v-for="item in ruleForm.options" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 144px;" v-model="ruleForm.value2" placeholder="订单状态" size="small">
          <el-option width="100" v-for="item in ruleForm.options2" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-form-item>
          <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="ruleForm.time" default-time="12:00:00"
            style="width: 100%;" size="small"></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="ruleForm.time2" default-time="12:00:00"
            style="width: 100%;" size="small"></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query('2',navShow)" size="small">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetForm('ruleForm')">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table :data="tableData" height="500" border style="width: 100%;">
        <el-table-column header-align="center" label="基本信息" min-width="250">
          <template slot-scope="data">
            <div class="fb"><span>状态</span><span class="CYAN">{{ data.row.state | statusNum }}</span></div>
            <div class="fb"><span>货源单号</span><span class="BLUE">{{ data.row.orderNumber }}</span></div>
            <div class="fb"><span>发货联系人</span><span>{{ data.row.consignor }}</span></div>
            <div class="fb"><span>发货联系电话</span><span>{{ data.row.conPhone }}</span></div>
            <div class="fb"><span>收货联系人</span><span>{{ data.row.receiving }}</span></div>
            <div class="fb"><span>收货联系电话</span><span>{{ data.row.rePhone }}</span></div>
            <div class="fb"><span>发货类型</span><span class="CYAN">{{ data.row.deliveryMode }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="行程" min-width="280">
          <template slot-scope="data">
            <div class="fb">
              <span>起始城市</span><span>{{ `${data.row.conProvinces} - ${data.row.conCity} - ${data.row.conArea}` }}</span>
            </div>
            <div class="fb">
              <span>目的地城市</span><span>{{ `${data.row.provinces} - ${data.row.reCity} - ${data.row.reArea}` }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="运费" min-width="186">
          <template slot-scope="data">
            <div class="fb"><span>运费单价</span><span>{{ data.row.freight }}</span></div>
            <div class="fb"><span>预估总价</span><span>{{ data.row.totalPrice }}</span></div>
            <div class="fb"><span>付款方式</span><span>{{ data.row.payment }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="货物信息" min-width="186">
          <template slot-scope="data">
            <div class="fb"><span>货物名称</span><span>{{ data.row.name }}</span></div>
            <div class="fb"><span>订单量</span><span>{{ data.row.quantity }}</span></div>
            <div class="fb"><span>货物单位</span><span>{{ data.row.unitload }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="时间" min-width="260">
          <template slot-scope="data">
            <div class="fb"><span>客户下单时间</span><span>{{ data.row.createTime }}</span></div>
            <div class="fb"><span>要求发货时间</span><span>{{ data.row.pickupTime }}</span></div>
            <div class="fb"><span>要求到货时间</span><span>{{ data.row.deliveryTime }}</span></div>
            <div class="fb"><span>要求回单时间</span><span>{{ data.row.number19 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="其他" min-width="190">
          <template slot-scope="data">
            <div class="fb"><span>需求车型</span><span>{{ data.row.carMode }}</span></div>
            <div class="fb"><span>需求车长</span><span>{{ data.row.length }}</span></div>
            <div class="fb"><span>车辆载重</span><span>{{ data.row.loads }}</span></div>
            <div class="fb"><span>允许损耗</span><span>{{ data.row.factor }}</span></div>
            <div class="fb"><span>备注</span><span>{{ data.row.remarks }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作" min-width="100">
          <template slot-scope="scope">
            <div v-if="navShow==1&&(scope.row.state==0||scope.row.state==1||scope.row.state==5)">
              <el-button @click="changePrice(scope.row.orderNumber)" type="text" size="small">调价</el-button>
            </div>
            <div v-if="navShow==2&&(scope.row.state==0)">
              <el-button @click="acceptance(scope.row.orderNumber)" type="text" size="small">受理</el-button>
            </div>
            <div v-if="navShow==2&&(scope.row.state!=0||scope.row.state==1)">
              <el-button @click="offerList(scope.row.orderNumber,1,5,1)" type="text" size="small">报价列表</el-button>
            </div>
            <div v-if="navShow==2&&(scope.row.state==6)">
              <el-button @click="offerList(scope.row.orderNumber,1,5,2)" type="text" size="small">指定承运人</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 报价列表 -->
    <div class="tableList">
      <el-dialog title="报价列表" width="60%" :visible.sync="listDialog" center>
        <div class="refresh"><i @click="offerList(scope.row.orderNumber,1,5,1)" class="el-icon-refresh"></i></div>
        <el-table ref="multipleTable" @selection-change="handleSelectionChange" highlight-current-row height="420"
          :data="gridData">
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio @change.native="getTemplateRow(scope.$index,scope.row)" v-model="radioIndex"
                :label="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" label="竞价状态" width="100">已竞价</el-table-column>
          <el-table-column align="center" label="承运商名称" prop="carrierName"></el-table-column>
          <el-table-column align="center" label="承运商报价" prop="makeOffer" width="100"></el-table-column>
          <el-table-column align="center" label="承运联系人" prop="name" width="100"></el-table-column>
          <el-table-column align="center" label="联系电话" prop="phone"></el-table-column>
          <el-table-column align="center" label="竞价备注" prop="remark"></el-table-column>
          <el-table-column align="center" label="操作" width="60">
            <template slot-scope="scope">
              <el-button @click="deleteSure(scope.$index, gridData)" type="text" size="small"><img class="iconimg"
                  :src="require('@/assets/img/iconfont/delete.png')" alt=""></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-pagination background layout="prev, pager, next" :total="50" :size="10">
          </el-pagination>
          <div class="btn"><button @click="sureAdjust">确认</button><button @click="listDialog=false">取消</button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 调价 -->
    <!-- <el-dialog
      class="dialog"
      title="调价"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-form :inline="true" style="text-align: center;" class="mt24">
        <el-form-item label="运费价格">
          <el-input v-model="price" size="small"> <template slot="append">元/{{unit}}</template></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确认</el-button>
        <el-button @click="centerDialogVisible = false">取消</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  apiSearchOrder,
  apiOfferList,
  apiDeleteOfferItem,
  apiaAjustPrice,
  apiAcceptance,
  apiAppoint
} from "@/utils/api";
export default {
  name: "order",
  filters: {
    statusNum(value) {
      const status = [
        "待受理",
        "调价中",
        "执行中",
        "运输中",
        "已完成",
        "已拒绝",
        "已受理"
      ];
      return status[value];
    }
  },
  data() {
    return {
      navShow: "1",
      listDialog: false,
      dialogVisible: false,
      centerDialogVisible: false,
      dispatchDialog: true,
      type: 1,//控制报价列表，指定承运商列表
      price: "", //调价
      unit: "",
      ruleForm: {
        number: "",
        value: "",
        value2: "",
        options: [
          {
            value: "大宗",
            label: "大宗"
          },
          {
            value: "整车",
            label: "整车"
          }
        ],
        options2: [
          {
            value: "报价中",
            label: "报价中"
          },
          {
            value: "待受理",
            label: "待受理"
          },
          {
            value: "执行中",
            label: "执行中"
          },
          {
            value: "运输中",
            label: "运输中"
          },
          {
            value: "已完成",
            label: "已完成"
          }
        ],
        time: "",
        time2: ""
      },
      tableData: [
        {
          status: "待受理",
          number1: "D201911250001",
          number2: "增幅",
          number3: "15426333562",
          number4: "你好",
          number5: "15426333562",
          number6: "大宗",
          number7: "北京市-市辖区-海淀区",
          number8: "四川省-成都市-金牛区",
          number9: "90元/吨",
          number10: "90000元",
          number11: "月结",
          number12: "煤炭",
          number13: "1000",
          number14: "吨",
          number16: "2019.11.28-14.:25",
          number17: "2019.11.28-14.:25",
          number18: "2019.11.28-14.:25",
          number19: "2019.11.28-14.:25",
          number20: "2019.11.28-14.:25",
          number21: "————"
        },
        {
          status: "待受理",
          number1: "D201911250001",
          number2: "增幅",
          number3: "15426333562",
          number4: "你好",
          number5: "15426333562",
          number6: "大宗",
          number7: "北京市-市辖区-海淀区",
          number8: "四川省-成都市-金牛区",
          number9: "90元/吨",
          number10: "90000元",
          number11: "月结",
          number12: "煤炭",
          number13: "1000",
          number14: "吨",
          number16: "2019.11.28-14.:25",
          number17: "2019.11.28-14.:25",
          number18: "2019.11.28-14.:25",
          number19: "2019.11.28-14.:25",
          number20: "2019.11.28-14.:25",
          number21: "————"
        }
      ],
      gridData: [
        {
          id: "1",
          status: "已报价",
          company: "顺分物流贸易有限公司",
          price: "10000",
          name: "小刀",
          phone: "1789663366",
          remark: "备注信息"
        },
        {
          id: "2",
          status: "已报价",
          company: "顺分物流贸易有限公司",
          price: "10000",
          name: "小刀",
          phone: "1789663366",
          remark: "备注信息"
        },
        {
          id: "3",
          status: "已报价",
          company: "顺分物流贸易有限公司",
          price: "10000",
          name: "小刀",
          phone: "1789663366",
          remark: "备注信息"
        },
        {
          id: "4",
          status: "已报价",
          company: "顺分物流贸易有限公司",
          price: "10000",
          name: "小刀",
          phone: "1789663366",
          remark: "备注信息"
        },
        {
          id: "5",
          status: "已报价",
          company: "顺分物流贸易有限公司",
          price: "10000",
          name: "小刀",
          phone: "1789663366",
          remark: "备注信息"
        }
      ],
      radioIndex: "",
      radioData: {}
    };
  },
  created() {},
  mounted() {
    this.query("1", this.navShow);
  },
  methods: {
    // status订单状态(1：已报价，2：未报价)
    //查询订单
    query(type, status) {
      apiSearchOrder({
        status: status,
        orderNumber: type == 1 ? "" : this.ruleForm.number,
        state: "",
        pageNumber: 1,
        pageSize: 10
      })
        .then(res => {
          // console.log(res);
          this.tableData = res.data.records;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 已报价
    offerYes() {
      this.navShow = "1";
      this.query("1", this.navShow);
    },
    // 未报价
    offerNo() {
      this.navShow = "2";
      this.query("1", this.navShow);
    },
    //报价列表
    offerList(id, page, size, type) {
      this.listDialog = true;
      this.type = type;
      apiOfferList({
        orderNumber: id,
        pageNumber: page,
        pageSize: size
      })
        .then(res => {
          console.log(res);
          this.gridData = res.data.records;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 点击任意位置选中 报价列表调价
    getTemplateRow(index, row) {
      // console.log(row);
      this.radioData = row;
      this.radioIndex = row.id;
    },
    // 报价列表调价,指定承运人type=2
    sureAdjust() {
      if (this.type == 1) {
        apiaAjustPrice({
          orderNumber: this.radioData.orderNumber,
          adjustPrice: this.radioData.makeOffer
        })
          .then(res => {
            this.listDialog = false;
            this.$message({ type: "success", message: "调价信息提交成功" });
          })
          .catch(error => {
            console.log(error);
          });
      } else if (this.type == 2) {
        // 指定承运人
        apiAppoint({
          orderNumber: this.radioData.orderNumber,
          userid: this.radioData.userid,
          actualPrice: this.radioData.makeOffer
        })
          .then(res => {
            this.listDialog = false;
            this.$message({ type: "success", message: "指定承运商成功" });
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    // 删除
    deleteSure(index, rows) {
      // this.dialogVisible = true;
      console.log(rows);
      this.$confirm("确认删除？")
        .then(() => {
          apiDeleteOfferItem({
            id: rows[0].id
          })
            .then(res => {
              this.$message({ type: "success", message: "删除成功" });
              rows.splice(index, 1);
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(_ => {});
    },
    // 平台受理
    acceptance(id) {
      apiAcceptance({
        orderNumber: id
      })
        .then(res => {
          this.$message({ type: "success", message: "受理成功" });
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 调价
    changePrice(id) {
      this.$prompt("请输入价格", "调价", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9]*$/,
        inputErrorMessage: "输入格式不合法"
      })
        .then(({ value }) => {
          apiaAjustPrice({
            orderNumber: id,
            adjustPrice: value
          })
            .then(res => {
              this.$message({ type: "success", message: "调价信息提交成功" });
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 清空
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm.number = "";
      this.ruleForm.value = "";
      this.ruleForm.value2 = "";
      this.ruleForm.time = "";
      this.ruleForm.time2 = "";
    }
  }
};
</script>

<style lang="scss">
.tableList {
  .el-radio__label {
    display: none !important;
  }
  .el-table__body-wrapper td {
    border-left: none !important;
    border-right: none !important;
  }
  .el-table__body-wrapper {
    border: none !important;
    tr td:nth-of-type(1) {
      border-left: none !important;
    }
  }
}
</style>
<style lang="scss" scoped>
#order {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .navToggle {
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    button {
      cursor: pointer;
      width: 181px;
      height: 48px;
      border-radius: 10px;
      &.active {
        background: $blue;
        color: #fff;
      }
    }
  }
  .tableDetail span {
    line-height: 35px;
  }
  .dialog .price {
    color: $red;
  }
  .tableList .iconimg {
    width: 20px;
  }
  .tableList .btn button {
    cursor: pointer;
    margin: 24px 8px;
    width: 120px;
    line-height: 40px;
    background: $blue;
    border-radius: 10px;
    color: #fff;
    &:nth-of-type(2) {
      background: none;
      border: 1px solid $blue;
      color: $blue;
    }
  }
  .refresh {
    cursor: pointer;
    font-size: 16px;
    // position: relative;
    .el-icon-refresh {
      position: absolute;
      right: 44px;
      top: 24px;
    }
    &:hover {
      color: $blue;
    }
  }
}
</style>
